<script setup lang="ts">
import { ref, h } from "vue";
import {
  Table,
  DefaultPaginationData,
  usePagination,
  SearchForm,
  type Field,
  useSearchForm,
} from "cgx-component/index";

// const fieldList = ref<Field[]>();
const [fieldList, setFieldListAttribute] = useSearchForm([
  {
    label: "名称",
    key: "name",
    type: "input",
    placeholder: "请输入名称",
    clearable: true,
    default: "张三",
  },
  {
    label: "编号",
    key: "code",
    type: "input",
    placeholder: "请输入编号",
    clearable: true,
    default: "",
  },
  {
    label: "编号",
    key: "selectValue",
    type: "select",
    placeholder: "请选择",
    clearable: true,
    default: "",
    labelKey: "name",
    valueKey: "id",
    options: [{ name: "man", id: "123123" }],
  },
]);

const handleTrySet = () => {
  setFieldListAttribute("selectValue", "options", [
    { name: "man", id: "123123" },
    { name: "man333", id: "123" },
  ]);
};

const { paginationData } = usePagination();
//储存表格数据
const tableRef = ref();
const tableData = ref<any[]>([]);
const loading = ref(false);

//表格字段
const columns = [
  {
    label: "名字",
    prop: "name",
  },
  {
    label: "备注",
    prop: "remark",
  },
  {
    label: "状态",
    prop: "status",
    isVNode: true,
    render(row: any) {
      return h("div", row.status === "1" ? "启用" : "禁用");
    },
  },
];

//储存当前分页信息
let savePageData: DefaultPaginationData;

//获取数据
const getTableData = (page: DefaultPaginationData) => {
  console.log(page);
  loading.value = true;
  savePageData = page;
  // 模拟数据请求
  for (let i = 0; i < 20; i++) {
    tableData.value.push({
      name: "张三",
      age: 25,
      remark: "备注",
      status: "1",
    });
  }
  loading.value = false;
  savePageData.total = tableData.value.length;
};

const handleClick = () => {
  tableRef.value.queryList();
};

const handleResize = () => {
  console.log("触发回调");
};

const flip = ref(false);

const handleFlip = () => {
  flip.value = !flip.value;
};
const handleQuery = (value: any) => {
  console.log(value);
};
</script>

<template>
  <div v-resize="handleResize">
    <SearchForm
      :fieldList="fieldList"
      labelWidth="110px"
      @handleQuery="handleQuery"
    />
    <el-button @click="handleTrySet">按钮测试</el-button>
    <!-- <Table
      v-waves
      ref="tableRef"
      :loading="loading"
      :tableData="tableData"
      :columns="columns"
      @queryList="getTableData"
    ></Table> -->
    <!-- 卡片翻转 传值则受控 不传值默认hover -->
    <!-- <div
      @click="handleFlip"
      v-flip
      style="height: 300px; width: 300px; cursor: pointer"
    >
      <div class="front">front</div>
      <div class="back">back</div>
    </div>
    <el-button v-waves @click="handleClick" type="success">获取数据</el-button> -->
    <!-- 水波纹和平滑上升 -->
    <!-- <div
      v-slider
      v-waves
      v-for="i in 1000"
      style="
        height: 300px;
        margin-top: 10px;
        width: 300px;
        background-color: aqua;
        cursor: pointer;
      "
    ></div> -->
  </div>
</template>

<style scoped>
.front {
  width: 100%;
  height: 100%;
  background-color: aqua;
}
.back {
  width: 100%;
  height: 100%;
  background-color: red;
}
</style>
